(function(){
  // 写功能模块、尽量都写在立即调用函数中
  // DOMContentLoaded 文档加载到页面完毕就会触发
  document.addEventListener('DOMContentLoaded', function(){
    var chooseBtn = document.querySelector('.searchBtn');
    // console.log(chooseBtn);
    var chooseArr = ['商品', '专辑', '艺术家'];

    var chooseListDiv;
    chooseBtn.addEventListener('click', function(e){
      // 阻止冒泡
      e.stopPropagation();
      if(!chooseListDiv){
        var div = document.createElement('div');
        div.className = 'chooseList';
        chooseArr.forEach((item, i)=>{
          var itemDiv = document.createElement('div');
          itemDiv.className = 'chooseItem';
          itemDiv.innerHTML = item;
          div.appendChild(itemDiv);
        })
        chooseBtn.appendChild(div);
        chooseListDiv = div;
        chooseListDiv.style.opacity = '0';
        setTimeout(function(){
          chooseListDiv.style.opacity = '1';
        }, 0)
        // 委托父元素完成选择事件
        div.addEventListener('click', function(e){
          e.stopPropagation();
          var searchBtnText = document.querySelector('.searchBtn .text');
          searchBtnText.innerHTML = e.target.innerHTML;

          chooseListDiv.style.opacity = '0';
          chooseListDiv.addEventListener('transitionend', function(){
            chooseListDiv.style.display = 'none';
          })
        });
        document.documentElement.addEventListener('click', function (){
          // chooseListDiv.style.display = 'none';
          chooseListDiv.addEventListener('transitionend', function(){
            chooseListDiv.style.display = 'none';
          })
          chooseListDiv.style.opacity = '0';
        })
      } else {
        chooseListDiv.style.display = "block";
        // 先让他显示，再慢慢进行过渡
        chooseListDiv.style.opacity = '0';
        setTimeout(function(){
          chooseListDiv.style.opacity = '1';
        }, 0)
      }
      
    });


  })
})();